<template>
    <el-container>
      <el-header class="header">
        <Top></Top>
      </el-header>
      <el-container>
        <el-aside width="200px">
            <Left></Left>
        </el-aside>
        <el-main class="main-content">
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import Top from '@/component/top.vue'
import Left from '@/component/left.vue'
</script>

<style scoped>
.header {
    height: 96px;
    /* background-image: url('@/assets/logo3.webp'); 设置 logo 图片 */
    background-size: contain; /* 使背景图像适应容器 */
    background-repeat: no-repeat; /* 不重复背景图像 */
    background-position: center; /* 居中显示背景图像 */
}

.main-content {
    width: 100vw;
    height: 100vh;
    background-color: white; /* 设置背景颜色为白色 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    position: relative; /* 使伪元素定位相对于此元素 */
}

.main-content::before {
    content: "买卖宝后台管理"; /* 添加背景文本 */
    position: absolute;
    font-weight: bold;
    font-size: 48px; /* 设置背景文本的字体大小 */
    color: rgba(0, 0, 0, 0.1); /* 设置文本颜色和透明度 */
    z-index: -1; /* 确保文本在背景 */
}
</style>